<template name="vipquanyi">
	<view>
	<view class="gaijia_box">
	         <view class="gaijia_box_tp">
	             <view class="gaijia_box_tp_left" @tap="huangaiul()">
	                 <image src="../../static/leftbgf.png" v-show="showleft"></image>
	                 <view class="jdsnr" v-bind:style="{color:xiaoleft}">小潮人权益</view>
	             </view>
	             <view class="gaijia_box_tp_right" @tap="huangaiul2()">
	                  <image src="../../static/rightbgf.png" v-show="showright"></image>
	                 <view class="jdsnr" v-bind:style="{color:xiaoright}">大潮人权益</view>
	             </view>
	         </view>
	         <view class="gaijia_box_bt">
	             <!--小潮人权益-->
	             <view class="huan_gai_ul" v-show="showhuangaiul">
	             <view class="gaijia_box_bt_ul">
	                 <view class="gaijia_box_bt_li">
	                     <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/xiao1.png"/></image>
	                         <view class="gaijia_box_bt_span">分享赚钱</view>
	                     </navigator>
	                 </view>
	                   <view class="gaijia_box_bt_li">
	                   <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/xiao2.png"/></image>
	                         <view class="gaijia_box_bt_span">自购省钱</view>
	                     </navigator>
	                 </view>
	                   <view class="gaijia_box_bt_li">
	                     <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/xiao3.png"/></image>
	                         <view class="gaijia_box_bt_span">签到福利</view>
	                     </navigator>
	                 </view>
	                   <view class="gaijia_box_bt_li">
	                     <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/xiao4.png"/></image>
	                         <view class="gaijia_box_bt_span">邀请福利</view>
	                     </navigator>
	                 </view>
	             </view>
	             </view>
	              <!--大潮人权益-->
	                <view class="huan_gai_ul2" v-show="showhuangaiul2">
	             <view class="gaijia_box_bt_ul">
	                  <view class="gaijia_box_bt_li">
	                   <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac1.png"/></image>
	                         <view class="gaijia_box_bt_span">佣金翻倍</view>
	                     </navigator>
	                 </view>
	                 <view class="gaijia_box_bt_li">
	                   <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac2.png"/></image>
	                         <view class="gaijia_box_bt_span">专属补贴</view>
	                     </navigator>
	                 </view>
	                    <view class="gaijia_box_bt_li">
	                   <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac3.png"/></image>
	                         <view class="gaijia_box_bt_span">专业培训</view>
	                     </navigator>
	                 </view>
	                    <view class="gaijia_box_bt_li">
	                 <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac4.png"/></image>
	                         <view class="gaijia_box_bt_span">福利群</view>
	                     </navigator>
	                 </view>
	                    <view class="gaijia_box_bt_li">
	                    <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac5.png"/></image>
	                         <view class="gaijia_box_bt_span">推荐奖励</view>
	                     </navigator>
	                 </view>
	                    <view class="gaijia_box_bt_li">
	                    <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac6.png"/></image>
	                         <view class="gaijia_box_bt_span">管理奖励</view>
	                     </navigator>
	                 </view>
	                    <view class="gaijia_box_bt_li">
	                     <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac7.png"/></image>
	                         <view class="gaijia_box_bt_span">出单奖励</view>
	                     </navigator>
	                 </view>
	                    <view class="gaijia_box_bt_li">
	                    <navigator url="" hover-class="none" class="gaijia_box_bt_a">
	                         <image src="../../static/dac8.png"/></image>
	                         <view class="gaijia_box_bt_span">培育奖励</view>
	                     </navigator>
	                 </view>
	             </view>
	             </view>
	         </view>
	     </view>
	</view>
</template>

<script>
	export default{
		name:"vipquanyi",
		data(){
			return{
				topState:false,
				showhuangaiul:true,
				showhuangaiul2:false,
				showleft:true,
				showright:false,
				xiaoleft:'#fff',
				xiaoright:'#333'
			}
			
		},
		props:{
			
		},
		methods:{
			huangaiul (){
				this.showhuangaiul=true;
				this.showhuangaiul2=false;
				this.showleft=true;
				this.showright=false;
				this.xiaoleft='#fff';
				this.xiaoright='#333';
			},
			huangaiul2 (){
				this.showhuangaiul=false;
				this.showhuangaiul2=true;
				this.showleft=false;
				this.showright=true;
				this.xiaoleft='#333';
				this.xiaoright='#fff';
			}
		}
	}
</script>

<style>
	.gaijia_box{
	            /*display: none;*/
	           width:95%;
	           margin:25rpx auto 0;
	            box-shadow: 0 2rpx 12rpx #ccc;
	           border-radius: 40rpx;
	           background: #fff;
	       }
	       .gaijia_box_tp{
	           width:100%;
	           height:80rpx;
	           color:#333;
	               display: flex;
	   justify-content: flex-start;
	   align-items: center;
	       }
	       /*默认小潮人，gaijia_box_tp_left---color：#fff*/
	       .gaijia_box_tp_left{
	           width:50%;
	           height:100%;
	           position: relative;
	           display: flex;
	           justify-content: space-around;
	           align-items: center;
	           color:#fff;
	       }
	       .gaijia_box_tp_active{
	           color:#fff;
	           font-weight:300;
	       }
	       .jdsnr{
	           position: absolute;
				font-size:30rpx;
				color:#333;
	       }
	       .gaijia_box_tp_left image{
	           width:100%;
	           height:100%;
	       }
	    
	          .gaijia_box_tp_right{
	           width:50%;
	           height:100%;
	           position: relative;
	           display: flex;
	           justify-content: space-around;
	           align-items: center;
	       }
	       .gaijia_box_tp_right image{
	           width:100%;
	           height:100%;
	       }
	       .gaijia_box_bt{
	           width:100%;
	           /*height: 7.7rem;*/
	           overflow: hidden;
	           padding-bottom:15rpx;
	       }
	       .progress_bar .progress_number{
	           font-size: 24rpx;
	       }
	       .gaijia_box_bt_ul{
	           width:95%;
	           margin:0 auto;
	           display: flex;
	           flex-wrap:wrap;
	           justify-content: flex-start;
	           align-items: flex-start;
	       }
	       .gaijia_box_bt_li{
	           width:25%;
	                margin-top:15rpx;
	       }
	       .gaijia_box_bt_a{
	              display: flex;
	              width:100%;
	           flex-wrap:wrap;
	           justify-content: space-around;
	           align-items: center;
	       }
	       .gaijia_box_bt_a image{
	           width:80rpx;
				height:80rpx;
	           border-radius: 100rpx;
	       }
	       .gaijia_box_bt_span{
	           width:100%;
	           text-align: center;
	           color: #9a9a9a;
	           font-size: 24rpx;
	           margin-top:15rpx;
	       }
	
</style>
